<template>
    <div class="container login">
      <el-tabs v-model="loginType" class="loginForm" tab-position="left">
        <p class="title">后台管理系统</p>
        <el-tab-pane label="账号登录" name="account">
          <div>
            <div class="account-login">
              <el-form :model="loginForm" ref="Form" :rules="loginRules">
                <el-row :gutter="20">
                  <el-col>
                    <el-form-item label="账户" prop="username">
                      <el-input v-model="loginForm.username"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="密码" prop="password">
                      <el-input v-model="loginForm.password"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="验证码" prop="code">
                      <el-input v-model="loginForm.code" style="width: 49%;margin-right: 1%"></el-input>
                      <img :src="captchaImg" alt="验证码" style="width: 50%;height: 30px;cursor: pointer" @click="handleCaptcha">
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item>
                      <el-button type="primary" @click="handleClick" class="login-btn">
                        <span v-if="loading">登录中。。。</span>
                        <span v-else>登录</span>
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="扫码登录" name="qrcode">
          <div class="qrcode">
            <img src="@/assets/images/qrcode.webp" alt="二维码">
          </div>
        </el-tab-pane>
        <el-tab-pane label="手机登录" name="phone">
          <div class="phoneContainer">
            <el-row>
              <el-col>
                <el-from :model="PhoneForm" ref="forms" :rules="phoneRules" required>
                  <el-form-item label="验证码" prop="phoneCaptcha">
                    <el-input v-model="PhoneForm.phoneCaptcha">
                      <template #append><el-button >获取验证码</el-button></template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" class="login-btn" @click="phoneLogin">登录</el-button>
                  </el-form-item>
                </el-from>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script setup lang="ts">
import {reactive, Ref, ref} from 'vue';
import {ElMessage, FormRules} from "element-plus";
import {login,getCaptcha} from "@/api"
import {setToken} from "@/utils/auth.ts";
import {useRouter} from 'vue-router'
const router = useRouter();

let loginType:Ref<string, string> = ref("account")
let captchaImg:Ref<string,string> = ref("")
const loading:Ref<string,boolean> = ref(null)
const Form = ref(null)
const loginForm = ref({
    username:"admin",
    password:"admin123",
    code:"",
    uuid: "",
})

const PhoneForm = ref({
  phoneCaptcha:"",
})

interface RuleForm{
  username:string;
  password:string;
  captcha:string;
}

interface RulePhoneForm{
  phoneCaptcha:string;
}

const loginRules = reactive<FormRules<RuleForm>>({
  username: [{required: true,message:"请输入用户名",trigger:"blur"}],
  password: [{required: true,message:"请输入密码",trigger:"blur"}],
  captcha: [{required: true,message:"请输入验证码",trigger:"blur"}],
})
const phoneRules = reactive<FormRules<RulePhoneForm>>({
  phoneCaptcha: [{required: true,message:"请输入验证码",trigger:"blur"}],
})

// 账号登录
function handleClick() {
    router.push({path: "/"})
  Form.value.validate(valid => {
    if (valid) {
      loading.value = true;
      login(loginForm.value).then(res => {
        loading.value = false
        setToken(res.data.token)
        router.push({path: "/"})
        ElMessage({
          message: "登录成功",
          type: "success"
        })
      }).catch(e=>{
        ElMessage({
          message: e.message,
          type: "error"
        })
        Captcha()
      })
    }
  })
}

// 手机登录
function phoneLogin() {
  console.log(PhoneForm.value)
}

// 获取验证码
function Captcha() {
  getCaptcha().then(res => {
    console.log(res.data)
    captchaImg.value = 'data:image/gif;base64,' + res.data.img
    loginForm.value.uuid = res.data.uuid
  })
}

function handleCaptcha() {
  Captcha()
}

Captcha()

</script>

<style lang="scss" scoped>
.container {
  background: url("/src/assets/images/background.png") no-repeat center center;
  background-size: cover;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginForm{
  width: 500px;
  height: 317px;
  padding: var(--border-width);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 999;
  .title{
    text-align: center;
    padding-top: 10px;
  }

  .login-btn{
    margin: 20px auto 0;
    width: 65%;
  }
}

.loginForm::after{
  content: "";
  position: absolute;
  left: var(--border-width);
  top: var(--border-width);
  background: #fff;
  width: calc(100% - var(--border-width) * 2);
  height: calc(100% - var(--border-width) * 2);
  z-index: -1;
  border-radius: 6px;
}

.loginForm::before {
  width: 490px;
  height: 490px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(90deg, #00d2d2, #0085f9 50%);
  transform-origin: 0 0;
  z-index: -2;
  animation: rotate1 3s linear infinite;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



.qrcode img{
  display: block;
  margin: 0 auto 20px;
}

.el-form{
  padding: 10px 15px 10px 10px;
}

.phoneContainer{
  margin-top: 10px;
  padding-right: 10px;
}


</style>

<style>
.el-tabs .el-tabs__header{
  padding: 0 var(--border-width) !important;
  height: 100% !important;
}

.el-tabs__item{
  padding: 10px 10px 10px 0;
}
</style>
